<template>
	<view class="iframe-content">
		<headerSpaceBetweenVue>
			<template #icon>
				<uni-icons type="info" size="30" @click="toggleModel()"></uni-icons>
			</template>
			<template #title>{{title}}</template>
		</headerSpaceBetweenVue>
		<view class="iframe-box">
			<iframe :src="url" frameborder="0" ref="iframe"></iframe>
		</view>
		<view class="model" v-if="showModel">
			<view class="item" @click="refreshUrl()">刷新</view>
			<view class="item" @click="closeModel()">关闭</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	let url = ref('')
	let title = ref('')
	let iframe = ref(null)
	let showModel = ref(false)
	const refreshUrl = () => {
		iframe.value.src = url.value
	}
	const toggleModel = () => {
		showModel.value = !showModel.value 
	}
	const closeModel = () => {
		showModel.value = false
	}
	onLoad((e) => {
		url.value = e.url
		title.value = e.desc
	})
</script>

<style lang="scss" scoped>
	.iframe-content {
		position: relative;
		padding: 20rpx;
		padding-top: calc(var(--status-bar-height) + 100rpx);

		.model {
			position: absolute;
			right: 0;
			top: 0;
			background-color: #fff;
			box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.08);
			border-radius: 0 10rpx  0;
			padding-top: calc(var(--status-bar-height) + 90rpx);

			.item {
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				line-height: 80rpx;
				border-bottom: 1rpx solid #eee;
			}
		}

		.iframe-box {
			position: absolute;
			height: calc(100vh - var(--status-bar-height) - 100rpx);
			left: 0;
			right: 0;
			bottom: 0;
			top: calc(var(--status-bar-height));

			iframe {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>